<template>
  <div>

    <br/>
    <el-tag type="success">停车场管理员会员管理</el-tag>
    <br/>
    <el-button type="text" @click="dialogFormVisible = true">添加停车场会员类型</el-button>
    <el-table
      :data="tableData"
      border
      :stripe="true"
      style="width: 100%">
      <el-table-column
        fixed
        prop="vtName"
        label="VIP名称">
      </el-table-column>
      <el-table-column
        prop="vtPrice"
        label="VIP单价">
      </el-table-column>
      <el-table-column
        prop="vtDay"
        label="会员有效时长">
      </el-table-column>
      <el-table-column
        prop="vtDesc"
        label="VIP描述">
      </el-table-column>
      <el-table-column
        prop="vtDiscount"
        label="VIP折扣">
      </el-table-column>
      <el-table-column
        prop="vtState"
        label="VIP类别" :formatter="formatStatus">
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editVipType(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deletePKVipType(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--添加会员类型-->
    <el-dialog title="添加停车场会员类型" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="VIP名称" :label-width="formLabelWidth">
          <el-input v-model="form.vtName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="VIP单价" :label-width="formLabelWidth">
          <el-input v-model="form.vtPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员有效时长" :label-width="formLabelWidth">
          <el-input v-model="form.vtDay" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="VIP描述" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.vtDesc"></el-input>
        </el-form-item>
        <el-form-item label="VIP折扣" :label-width="formLabelWidth">
          <el-input v-model="form.vtDiscount" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addPKVipType">确定添加</el-button>
      </div>
    </el-dialog>
    <!--编辑会员类型-->
    <el-dialog title="编辑停车场会员类型" :visible.sync="editDialogFormVisible">
      <el-form :model="editForm">
        <el-form-item label="VIP名称" :label-width="formLabelWidth">
          <el-input v-model="editForm.vtName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="VIP单价" :label-width="formLabelWidth">
          <el-input v-model="editForm.vtPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员有效时长" :label-width="formLabelWidth">
          <el-input v-model="editForm.vtDay" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="VIP描述" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="editForm.vtDesc"></el-input>
        </el-form-item>
        <el-form-item label="VIP折扣" :label-width="formLabelWidth">
          <el-input v-model="editForm.vtDiscount" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updatePKVipType">确定更新</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
// import {getPKVipTypes,updatePKVipType,deletePKVipType,addPKVipType,} from "../../http/api";
import {getPKVipTypes,updatePKVipType,deletePKVipType,addPKVipType,} from "../../api/vipMG";
export default {
  name: "Projects",
  data() {
    return {
      tableData: [],
      tabPosition: 'left',
      //对话框
      dialogFormVisible: false,
      editDialogFormVisible: false,
      form: {
        vtId:'',
        vtName:'',
        vtPrice:'',
        vtDay:'',
        vtDesc:'',
        vtDiscount:'',
      },
      editForm: {
        vtId:'',
        vtName:'',
        vtPrice:'',
        vtDay:'',
        vtDesc:'',
        vtDiscount:'',
      },
      //查询的项目状态
      formLabelWidth: '120px',
      curUser: {},
    }
  },
  methods: {
    formatStatus(row, column, cellValue, index){
      return cellValue==0?'平台VIP':cellValue==1?'停车场VIP':'未知';
    },

    addPKVipType(){
      // console.log("add form",this.form);
      addPKVipType(this.form).then(response=>{
        // let result = response.data;
        let result = response;
        if (result.code==0){
          this.dialogFormVisible = false;
          this.$message({
            type: 'success',
            message:result.msg,
          });
          this.getPKVipTypes();
        }else if(result.code==1){
          // this.dialogFormVisible = false;
          this.$message({
            type: 'error',
            message: result.msg,
          });
          this.getPKVipTypes;
        }
      });
    },
    editVipType(row){
      this.editDialogFormVisible=true;
      console.log("row:",row);
      this.editForm=row;
    },

    updatePKVipType(){
      this.$confirm('是否要更新吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        let vipType = this.editForm;
        // console.log("edit from1====>>",vipType);
        updatePKVipType(vipType).then(response=>{
          // console.log("edit from1====>>",project);
          // let result = response.data;
          let result = response;
          // console.log("response2====>>",response);
          if (result.code==0){
            this.editDialogFormVisible = false;
            this.getPKVipTypes;
            this.$message({
              type: 'success',
              message: '更新成功!'
            });
          }else{
            this.editDialogFormVisible = false;
            this.getPKVipTypes;
            this.$message({
              type: 'error',
              message: '更新失败!'
            });
          }
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消更新'
        });
      });
    },

    deletePKVipType(row){
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        let vipType = {};
        vipType.vtId=row.vtId;
        // console.log("edit from1====>>",vipType);
        deletePKVipType(vipType).then(response=>{
          // console.log("edit from1====>>",project);
          // let result = response.data;
          let result = response;
          // console.log("response2====>>",response);
          if (result.code==0){
            this.editDialogFormVisible = false;
            this.getPKVipTypes();
            this.$message({
              type: 'success',
              message: 'Vip类型删除成功!'
            });
          }else{
            this.editDialogFormVisible = false;
            this.getPKVipTypes();
            this.$message({
              type: 'error',
              message: 'Vip类型删除失败!'
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    getPKVipTypes(){
      getPKVipTypes().then(response=>{
        let result = response;
        if (result.code==0){
          this.tableData = result.data;
          this.$message({
            type: 'info',
            message: result.msg,
          })
        }
      });
    },

  },

  created(){
    this.curUser = this.$store.state.curUser;
    this.getPKVipTypes();
  },
  watch:{
    status(newValue,oldValue){
      console.log(newValue,"-----",oldValue);
      this.getProjects();
    }
  }
}
</script>

<style scoped>

</style>
